import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  TeamOutlined,
  FileOutlined,
  BankOutlined,
  UserOutlined,
  UnorderedListOutlined,
  AppstoreAddOutlined,
  ShopOutlined,
  FormOutlined,
  LockOutlined,
  FileTextOutlined, // New icon for "采购通知列表"
  FileDoneOutlined, // New icon for "归还申请列表"
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu, Button } from "antd";
import Item from "antd/es/list/Item";
import React, { useState, useEffect } from "react";

type MenuItem = Required<MenuProps>["items"][number];
type MyMenuProps = {
  onBreadcrumbChange: (newBreadcrumb: string[]) => void;
};

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
// admin(系统管理员)，purchaser（采购人员），m-admin（物资管理员），picker（领物），visitor（游客）
const itemsMapper = {
  admin: [
    getItem("首页", "/home", <PieChartOutlined />),
    getItem("账号列表", "/list-users", <UserOutlined />),
    getItem("物品列表", "/list-products", <UnorderedListOutlined />),
    getItem("物品种类列表", "/list-categories", <AppstoreAddOutlined />),
    getItem("供应商列表", "/list-suppliers", <ShopOutlined />),
    getItem("采购订单列表", "/list-purchase-orders", <FormOutlined />),
    getItem(
      "采购通知列表",
      "/list-purchase-notifications",
      <FileTextOutlined />
    ),
    // getItem("归还申请列表", "/list-return-applications", <FileDoneOutlined />),
    getItem("申请列表", "/list-applications", <FileDoneOutlined />),
    getItem("仓库列表", "/list-warehouses", <FileDoneOutlined />),
    getItem("仓库列表记录", "/list-warehouse-records", <FileDoneOutlined />),
    getItem("仓库物品列表", "/list-warehouse-products", <FileDoneOutlined />),

    getItem("密码修改", "/reset-password", <LockOutlined />),
  ],
  purchaser: [
    getItem("首页", "/home", <PieChartOutlined />),
    getItem("供应商列表", "/list-suppliers", <ShopOutlined />),
    getItem("采购订单列表", "/list-purchase-orders", <FormOutlined />),
    getItem(
      "采购通知列表",
      "/list-purchase-notifications",
      <FileTextOutlined />
    ),
    // getItem("仓库列表", "/list-warehouses", <FileDoneOutlined />),
    // getItem("仓库列表记录", "/list-warehouse-records", <FileDoneOutlined />),

    getItem("密码修改", "/reset-password", <LockOutlined />),
  ],
  "m-admin": [
    // 1. 物品列表
    // 2. 物品种类列表
    // 3. 采购通知列表
    // 4. 归还申请列表
    getItem("首页", "/home", <PieChartOutlined />),

    getItem("物品列表", "/list-products", <UnorderedListOutlined />),
    getItem("物品种类列表", "/list-categories", <AppstoreAddOutlined />),
    getItem("申请列表", "/list-applications", <FileDoneOutlined />),
    getItem(
      "采购通知列表",
      "/list-purchase-notifications",
      <FileTextOutlined />
    ),
    getItem("仓库列表", "/list-warehouses", <FileDoneOutlined />),
    getItem("仓库列表记录", "/list-warehouse-records", <FileDoneOutlined />),
    getItem("仓库物品列表", "/list-warehouse-products", <FileDoneOutlined />),

    getItem("密码修改", "/reset-password", <LockOutlined />),

    // getItem("归还申请列表", "/list-return-applications", <FileDoneOutlined />),
  ],
  picker: [
    getItem("首页", "/home", <PieChartOutlined />),
    getItem("申请列表", "/list-applications", <FileDoneOutlined />),
    getItem("密码修改", "/reset-password", <LockOutlined />),
  ],
  visitor: [
    getItem("首页", "/home", <PieChartOutlined />),
    getItem("密码修改", "/reset-password", <LockOutlined />),
  ],
};
let key = localStorage?.role_code;
let items: MenuItem[] = itemsMapper[key || "visitor"];

// const items: MenuItem[] = [
//   getItem("首页", "/home", <PieChartOutlined />),
//   getItem("账号列表", "/list-users", <UserOutlined />),
//   getItem("物品列表", "/list-products", <UnorderedListOutlined />),
//   getItem("物品种类列表", "/list-categories", <AppstoreAddOutlined />),
//   getItem("供应商列表", "/list-suppliers", <ShopOutlined />),
//   getItem("采购订单列表", "/list-purchase-orders", <FormOutlined />),
//   getItem("采购通知列表", "/list-purchase-notifications", <FileTextOutlined />),
//   getItem("归还申请列表", "/list-return-applications", <FileDoneOutlined />),
//   getItem("密码重置", "/reset-password", <LockOutlined />),

//   // getItem("商品管理", "/goods", <PieChartOutlined />),
//   // getItem("用户管理", "/user", <DesktopOutlined />),
//   // getItem("公告管理", "/notices", <PieChartOutlined />),
//   // getItem("订单管理", "/order", <DesktopOutlined />),
//   // getItem("分类管理", "/category", <DesktopOutlined />),
//   // getItem("字典管理", "/dict_types", <DesktopOutlined />),
//   // getItem("hello", "/sub1/hello", <DesktopOutlined />),
// ];
import { useNavigate, useLocation } from "react-router-dom";

// 向外部传递
const MyMenu: React.FC<MyMenuProps> = ({ onBreadcrumbChange }) => {
  let navigateTo = useNavigate();
  let currentRoute = useLocation();
  // 点击侧边栏
  const handleMenuClick = (e: { key: string }) => {
    navigateTo(e.key);
    console.log(items);

    items.forEach((item) => {
      if (item?.key == e.key) {
        onBreadcrumbChange([item.label]);
      }
    });
  };
  // 初始化默认展开的菜单
  let [openKeys, setOpenKeys] = useState([""]);
  // 菜单展开关闭的回调
  const changeMenu = (keys: string[]) => {
    setOpenKeys([keys[keys.length - 1]]);
  };

  // 刷新上次展开的菜单不会关闭
  function defaultOpenMenu() {
    items.forEach((menu: any) => {
      if (
        menu.children &&
        menu.children.find(
          (menuSub: { key: string }) => menuSub.key == currentRoute.pathname
        )
      ) {
        setOpenKeys([menu.key]);
      }
    });
  }

  // 生命周期
  useEffect(() => {
    defaultOpenMenu();
  }, []);

  return (
    <div>
      <Menu
        key={localStorage?.user_id || "key"}
        theme="dark"
        defaultSelectedKeys={[currentRoute.pathname]}
        mode="inline"
        items={items}
        onClick={handleMenuClick}
        onOpenChange={changeMenu}
        openKeys={openKeys}
      />
    </div>
  );
};

export default MyMenu;
